window.onload=function(){
    bannerEffect();
}
/*轮播图*/
function  bannerEffect(){
    //获取元素
    var banner=document.querySelector(".jd_banner");
    var imgBox=banner.querySelector("ul:first-of-type");
    var first=imgBox.querySelector("li:first-of-type");
    var last=imgBox.querySelector("li:last-of-type");
    imgBox.appendChild(first.cloneNode(true));
    imgBox.insertBefore(last.cloneNode(true),imgBox.firstChild);
    //设置样式
    var lis=imgBox.querySelectorAll("li");
    var count=lis.length;
    var bannerWidth=banner.offsetWidth;
    imgBox.style.width=count*bannerWidth+"px";
    for(var i=0;i<lis.length;i++){
        lis[i].style.width=bannerWidth+"px";
    }
    var index=1;
    imgBox.style.left=-bannerWidth+"px";
    // 屏幕变化
    window.onresize=function(){
        bannerWidth=banner.offsetWidth; 
        imgBox.style.width=count*bannerWidth+"px";
        for(var i=0;i<lis.length;i++){
            lis[i].style.width=bannerWidth+"px";
        }
        imgBox.style.left=-index*bannerWidth+"px";
    }
    /*实现点标记*/
   var setIndicator=function(){
       var circle=banner.querySelector("ul:last-of-type").querySelectorAll("li");
       /*先清除其它li元素的active样式*/
       for(var i=0;i<circle.length;i++){
           circle[i].classList.remove("active");
       }
       circle[index-1].classList.add("active");
   }

    var timerId;
    //自动轮播
    var startTime=function(){
        timerId=setInterval(function(){
            index++;
            imgBox.style.transition="left 0.5s ease-in-out";
            imgBox.style.left=(-index*bannerWidth)+"px";
        },1500);
    }
    startTime();

    //手动轮播
    var startX,moveX,distanceX;
    
    var isEnd=true;
    imgBox.addEventListener("touchstart",function(e){
        clearInterval(timerId);
        startX= e.targetTouches[0].clientX;
    });
    /*为图片添加触摸事件--滑动过程*/
    imgBox.addEventListener("touchmove",function(e){ 
       
        if(isEnd==true){
            /*记录手指在滑动过程中的位置*/
            moveX= e.targetTouches[0].clientX;
            /*计算坐标的差异*/
            distanceX=moveX-startX;   
            /*为了保证效果正常，将之前可能添加的过渡样式清除*/
            imgBox.style.transition="none";
             //* 重大细节：本次的滑动操作应该基于之前轮播图已经偏移的距离*/
            imgBox.style.left=(-index*bannerWidth + distanceX)+"px";
        }
    });
    /*touchend:松开手指触发*/
    imgBox.addEventListener("touchend",function(e){
        isEnd=false;
        /*获取当前滑动的距离，判断距离是否超出指定的范围 100px*/
        if(Math.abs(distanceX) > 100){
            if(distanceX > 0){//上一张
                index--;
            }
            else{ //下一张
                index++;
            }
            /*翻页*/
            imgBox.style.transition="left 0.5s ease-in-out";
            imgBox.style.left=-index*bannerWidth+"px";
        }
        else if(Math.abs(distanceX) > 0){ //得保证用户确实进行过滑动操作
            /*回弹*/
            imgBox.style.transition="left 0.5s ease-in-out";
            imgBox.style.left=-index*bannerWidth+"px";
        }
        /*将上一次move所产生的数据重置为0*/
        startX=0;
        moveX=0;
        distanceX=0;
    });
    imgBox.addEventListener("webkitTransitionEnd",function(){
        if(index==count-1){
            index=1;
            /*清除过渡*/
            imgBox.style.transition="none";
            /*设置偏移*/
            imgBox.style.left=-index*bannerWidth+"px";
        }
        else if(index==0){
            index=count-2;
            /*清除过渡*/
            imgBox.style.transition="none";
            /*设置偏移*/
            imgBox.style.left=-index*bannerWidth+"px";
        }
        /*设置标记*/
        setIndicator();
        setTimeout(function(){
            isEnd=true;
            /*清除之前添加的定时器*/
            clearInterval(timerId);
            //重新开启定时器
            startTime();
        },100);
    });
}